<template>
    <div class="classify bg" style="overflow: hidden;">
            <div class="van-nav-bar__content">
                <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow"><!----></i><span
                        class="van-nav-bar__text" @click="Loss">返回</span></div>
                <div class="van-nav-bar__title van-ellipsis"></div>
            </div>
            <div class="ovhiff bg">
                <van-tabs v-model="activeName" class="ovhif bg" @change="onClickDisabled">
                    <van-tab class="bg" :title="item.name" :name="item.id" v-for="(item, index) in deta" :key="index">
                        <h3 style="text-align: center; font-size: 20px; font-weight: 500;">{{ item.name }}</h3>
                        <p style="text-align: center; color: gray;">{{ item.desc }}</p>
                    </van-tab>
                </van-tabs>
            </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

            <div class="buttom">
                <div  v-for="(item, index) in list" :key="index">
                    <div class="list" v-for="(item, index) in list[index]" @click="shop(item)">
                    <div class="left">
                        <img :src="item.picUrl" alt="" width="88px" height="88px">
                    </div>
                    <div class="right">
                        <div class="top">
                            <br>
                            <div>{{ item.name }}</div>
                            <div style="color: gray;">{{ item.brief }}</div>
                        </div>
                        <br>
                        <div class="buttom">
                            ￥{{ item.retailPrice }} <span>￥{{ item.counterPrice }}</span>
                        </div>
                    </div>
                </div>
                </div>
                
            </div>
        </van-list>

    </div>
</template>
<script>
import { Search, deta, Lsti, } from "../../api/index"
export default {
    name: "classify",
    data() {
        return {
            activeName: '',
            deta: "",
            list: [],
            pages: "",
            loading: false,
            finished: false,
            item:""
        }
    },
    methods: {
        shop(item){
            console.log(item)

            this.$router.push({
                path: '/shop',
                query: {
                    id: item.id
                }
            })
        },
        Loss() {
            localStorage.removeItem("user")
            this.$router.push({ path: "/classify" })
        },
        onClickDisabled(name, title) {
            console.log(name, title)
            console.log(name)
            // var abc={"nihao":name}
            localStorage.setItem("user",name)
            // localStorage.setItem("user",)
            this.item=name
            Lsti({ categoryId: name, page: 1, limit: 10 }).then(res => {
                this.list=[]
                this.pages = res.data.data.pages
                this.list.push(res.data.data.list)
                console.log(this.pages)
                console.log(this.list)
             this.onLoad()
            })
            
            
        },
        onLoad() {
            setTimeout(() => {
                for (var i = 2; i <= this.pages; i++) {
                    Lsti({ categoryId: this.item, page: i, limit: 10 }).then(res => {
                        this.list.push(res.data.data.list)
                        // console.log(this.pages)
                        // console.log(this.list)
                    })
                }
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                if (this.list.length >= this.pages) {
                    this.finished = true;
                }
                console.log(this.list)
            }, 1000);
        },
    },
    created(){
        
        var aoo=localStorage.getItem("user")
        console.log(aoo)
        var add=this.$route.query.index
        this.activeName = this.$route.query.id.id 
            var add=this.$route.query.index
            this.item=add
        console.log(aoo==null)
        if (aoo==null) {
            
        console.log(add)
        // Search().then(res => {
        //     console.log(res.data.data)
        // })
        Lsti({ categoryId: add, page: 1, limit: 10 }).then(res => {
            this.pages = res.data.data.pages
            this.list.push(res.data.data.list)
            console.log(this.pages)
            console.log(this.list)

        })
       
        console.log(this.list)
        }else{
            this.activeName=Number(aoo)    
            Lsti({ categoryId: aoo, page: 1, limit: 10 }).then(res => {
                this.list=[]
                this.pages = res.data.data.pages
                this.list.push(res.data.data.list)
                console.log(this.pages)
                console.log(this.list)
             this.onLoad()
            })
         }
         deta({ id: add }).then(res => {
            console.log(res.data.data)
            this.deta = res.data.data.brotherCategory
        })
       
    },
    mounted() {
      
    }
}
</script>
<style lang="scss">
.van-icon-arrow-left:before {
    content: '\e668';
    color: #1989fa;
    color: 1989fa;
}

.ovhiff {
    // border: 1px solid red;
    overflow-x: auto;

    .van-tabs__wrap--scrollable .van-tab {
        width: 90px;
    }
}

.buttom {
    width: 100%;
    height: calc(100vh - 95px - 107px);
    // border: 1px solid red;

    .list {
        // border: 1px solid red;
        width: 100%;
        height: 88px;
        margin: 8px 0 0;
        padding: 8px 16px;

        .left {
            height: 88px !important;
            float: left;
        }

        .right {
            width: 72%;
            // border: 1px solid red;
            height: 88px;
            padding-left: 10px;
            float: left;

            .top {
                font-size: 14px;
            }

            .buttom {
                height: 15px;

                span {
                    font-size: 14px;
                    color: gray;
                    text-decoration: line-through;
                }
            }

        }
    }
}

.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
    color: #969799;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    position: relative;
    bottom: 0;
    float: left;
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>